{% block sw_settings_state_machine_detail %}
<sw-page class="sw-settings-state-machine-detail">
    {% block sw_settings_state_machine_detail_smart_bar_header %}
    <template #smart-bar-header>
        <h2>
            {{ placeholder(stateMachine, 'name') }}
        </h2>
    </template>
    {% endblock %}

    {% block sw_settings_state_machine_detail_language_switch %}
    <template #language-switch>
        <sw-language-switch
            :disabled="stateMachine === null"
            @on-change="onChangeLanguage"
        />
    </template>
    {% endblock %}

    {% block sw_settings_state_machine_detail_smart_bar_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_state_machine_detail_smart_bar_actions_cancel %}
        <mt-button
            v-tooltip.bottom="tooltipCancel"
            class="sw-settings-state-machine-detail__cancel"
            variant="secondary"
            size="default"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_settings_state_machine_detail_smart_bar_actions_save %}
        <sw-button-process
            v-model:process-success="isSaveSuccessful"
            v-tooltip.bottom="tooltipSave"
            class="sw-settings-state-machine-detail__save"
            variant="primary"
            :is-loading="isLoading"
            :disabled="isLoading || !allowSave"
            @click="onSave"
        >
            {{ $tc('global.default.save') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_state_machine_detail_content %}
    <template #content>
        <sw-card-view>
            {% block sw_settings_state_machine_detail_content_card %}
            <mt-card
                v-if="!isLoading"
                position-identifier="sw-settings-state-machine-detail-content"
                :title="$tc('sw-settings-state-machine.detail.stateMachineCardTitle')"
            >
                <sw-container
                    columns="repeat(auto-fit, minmax(250px, 1fr))"
                    gap="0px 30px"
                >
                    {% block sw_settings_state_machine_detail_content_card_name %}

                    <mt-text-field
                        v-model="stateMachine.name"
                        :label="$tc('sw-settings-state-machine.detail.fieldLabels.name')"
                        :error="stateMachineNameError"
                        required
                    />
                    {% endblock %}

                    {% block sw_settings_state_machine_detail_content_card_technical_name %}

                    <mt-text-field
                        v-model="stateMachine.technicalName"
                        :label="$tc('sw-settings-state-machine.detail.fieldLabels.technicalName')"
                        :disabled="true"
                        required
                    />
                    {% endblock %}
                </sw-container>
            </mt-card>
            {% endblock %}

            <sw-skeleton v-else />

            {% block sw_settings_state_machine_detail_content_list %}
            <sw-settings-state-machine-state-list
                ref="stateMachineStateList"
                :state-machine-id="stateMachineId"
            />
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
